
 // window.onload=function(){
	initSearch();
	carousel();
 // }
/**
 *头部搜索块js效果
 */
function initSearch(){
	//获取当年banner的高度
	var banner=document.querySelector(".jd_banner");
	var bannerHeight=banner.offsetHeight;
	//获取搜索块
	var search=document.querySelector('.jd_search');
    window.onscroll=function(){
		//获取html被上面卷进去的高度
		var offsetTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
		console.log(offsetTop)
		var opacity=1;
		//计算透明度设置背景样式
		 opacity=offsetTop/bannerHeight;
		 console.log(opacity)
		// //设置样式
		search.style.backgroundColor='rgba(233,35,24,'+opacity+')'
	}
}

function carousel(){

	/**
	 * 1.设置轮播图页面结构
	 * 2.在开始位置添加最后一张图片
	 * 3.在结束添加开始位置图片
	 */
	  //1.1获取轮播图结构
     var banner =document.querySelector('.jd_banner');
	 //1.2获取图片容器
	 var imgBox=banner.querySelector("ul:first-of-type");
	 //1.3获取第一张图片
	 var first=imgBox.querySelector('li:first-of-type')
	 //获取最后一张图片
	 var last=imgBox.querySelector('li:last-of-type')
	 //1.4在首位互放
	  imgBox.appendChild(first.cloneNode(true))
	  imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild)
	  //获取所有的li
	 var lis = imgBox.querySelectorAll('li');
	 //li元素数量
	 var count=lis.length
	 console.log(count)
	 //获取banner的宽度
     var bannerWidth=banner.offsetWidth;
	  console.log(bannerWidth)
     //设置盒子宽度
	 imgBox.style.width=count*bannerWidth+'px';
	 //设置每一个li元素的宽度
	 for(var i=0;i<count;i++){
		 lis[i].style.width=bannerWidth+'px'
	 }
	 //
	 imgBox.style.left=-bannerWidth+'px';
	 //定义图片索引，默认为1
	 var index =1;
	 /**
	  * 4当屏幕变化的时候，重新计算屏幕宽度
	  */
	  window.onresize=function(){
		  //4.1获取banner的宽度
		   bannerWidth=banner.offsetWidth;
		   console.log(bannerWidth)
		  //4.2设置盒子宽度
		  imgBox.style.width=count*bannerWidth+'px';
		  //4.3设置每一个li元素的宽度
		  for(var i=0;i<count;i++){
		  		 lis[i].style.width=bannerWidth+'px'
		  }
		  //4.4
		  imgBox.style.left=-index*bannerWidth+'px';
	  }

	  //轮播时间
	  var time=2000
	  //5实现自动轮播
	  var timerId
	  var startTimer=function(){
		  timerId = setInterval(function(){
		  		  /*5.1变换索引*/
		  		  index++;
		  		  //5.2添加过度
		  		  imgBox.style.transition='left 0.5s ease-in-out'
		  		  //5.3设置偏移
		  		  imgBox.style.left=-index*bannerWidth+'px';
		  		  //5.4判断是否达到最后一张，如果到了则返回第一张
		  		  console.log(index)
		  		  setTimeout(function(){
		  			  if (index==count-1) {
		  				   console.log(index)
		  			  	index=1
		  			  			/**
		  			  			 * 如果一个元素的某个属性之前添加过过度效果，那么这个过度属性会一直存在
		  			  			 * 如果不想要，则需要清除过度效果
		  			  			 */
		  			  			 /*5.5关闭过度效果*/
		  			  			 imgBox.style.transition='none'
		  			  			 /*5.6偏移到指定的位置*/
		  			  			 imgBox.style.left=-index*bannerWidth+'px';
		  			  }
		  		  },500)
		  		  
		  },time)
	  }
	 startTimer();
	  
	  /*6.实现手动轮播
	   *1.记录手指的起始位置
	   * 2.记录手指在滑动过程中的位置，计算相对起始位置，通过left样式实现图片的偏移
	   * 3.在松开手指之后，判断当前滑动的距离，如果超出指定距离就翻页
	   * touch事件触发，元素必须有宽高
	  */
	 var startX;
	 var moveX
	 var distanceX;
	 var isEnd=true
	 /*为图片添加触摸事件-触摸开始*/
	  imgBox.addEventListener('touchstart',function(e){
		  /*清楚自动轮播定时器*/
		  clearInterval(timerId);
		  //获取当前手指的起始位置
		  startX=e.targetTouches[0].clientX;
	  })
	  
	  var setIndicator=function(){
		 var indicators = banner.querySelector('ul:last-of-type').querySelectorAll('li');
	         for(var i=0;i<indicators.length;i++){
				 indicators[i].classList.remove('active')
			 }
			 indicators[index-1].classList.add('active');
	  }
	  /*为图片添加触摸事件--滑动过程*/
	   imgBox.addEventListener('touchmove',function(e){
		   if(isEnd){
				/*记录手指在滑动过程中的位置*/
				moveX=e.targetTouches[0].clientX;
				/*计算坐标的差异*/
				distanceX=moveX-startX;
				/*
				为了保证效果正常，将之前的可能添加的过度清楚
				实现元素的偏移 left参照最原始的坐标
				本次轮播应该基于之前的轮播图已经偏移的距离
				*/
				/*关闭过度效果*/
				imgBox.style.transition='none'
				imgBox.style.left=(-index*bannerWidth+distanceX)+'px';	   
		   }
		
	   })
	   /*添加触摸结束的事件*/
	   imgBox.addEventListener('touchend',function(){
		 /*获取当前滑动的距离，判断距离是否超过指定的范围100px*/
		 console.log(distanceX)
		 /*松开手指，过冬正在进行*/
		  isEnd=false;
		 if(Math.abs(distanceX)>100){
			 /*判断滑动的方向*/
			 if (distanceX>0) {//上一张
			 	index--
			 } else{//下一张
			 	index++
			 }
			 /*翻页*/
			 imgBox.style.transition='left 0.5s ease-in-out'
		      imgBox.style.left=-index*bannerWidth+'px';
		 }else if(Math.abs(distanceX)>0){
			 //回谈
			 imgBox.style.transition='left 0.5s ease-in-out'
			 imgBox.style.left=-index*bannerWidth+'px';
		 }
		 /*将上次move所产生的数据设置为0*/
		 startX=0;
		 moveX=0;
		 distanceX=0;
		 // /*重新开启定时器*/
		 clearInterval(timerId)
		  startTimer();
	   })
	   /**
		* webKitTransitionEnd 可以监听当前元素过度执行完毕，当过度完毕就会触发
		*/
	   imgBox.addEventListener('webkitTransitionEnd',function(){
		   /*如果到了最后一张应该会索引1*/
		   if(index==count-1){
			   index=1
			   /*清楚过渡*/
			   imgBox.style.transition='none'
			   /*设置偏移*/
			   imgBox.style.left=-index*bannerWidth+'px'
		   }else if(index==0){
			   /*如果到了第一张，回到索引count-2*/
			   index=count-2
			   /*清楚过渡*/
			   imgBox.style.transition='none'
			   /*设置偏移*/
			   imgBox.style.left=-index*bannerWidth+'px'
		   }
		   setTimeout(function(){
			   isEnd=true;
			   clearInterval(timerId)
			   /*重新打开定时器*/
			   startTimer();
		   },500)
		 setIndicator();
	   })
} 